<template>
  <div style="margin: 20px" v-loading="loading">
    <el-card>
      <div>创建商品</div>
      <el-tabs class="demo-tabs" v-model="activeName">
        <el-tab-pane label="基本信息" name="first">
          <goods-info ref="InfoForm" @InfoSubmit="InfoSubmit"></goods-info>
        </el-tab-pane>
        <el-tab-pane label="规格/库存" name="second">
          <goods-size @SizeSubmit="SizeSubmit" ref="SizeForm"></goods-size>
        </el-tab-pane>
        <el-tab-pane label="商品详情" name="third">
          <goods-details @DetailsSubmit="DetailsSubmit" ref="DetailsForm"></goods-details>
        </el-tab-pane>
        <el-tab-pane label="更多设置" name="fourth">更多设置</el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script setup>
import GoodsInfo from './GoodsInfo'
import GoodsSize from "@/view/Goods/GoodsSize";
import GoodsDetails from "@/view/Goods/GoodsDetails";
import {addModifyGood} from '../../../HTTP/api/goods'
import {useStore} from "vuex";
import {ref, onMounted} from "vue"
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import {useRoute} from "vue-router";

const router = useRouter()
const route = useRoute()
const store = useStore()
const InfoForm = ref()
const SizeForm = ref()
const DetailsForm = ref()
const activeName = ref("first")
const loading = ref(false)
//规格提交
const SizeSubmit = () => {
  InfoForm.value.GoodsForm.validate((Infovalid, fields) => {
    if (Infovalid) {
      SizeForm.value.aloneRef.validate(Sizevalid => {
        if (Sizevalid) {
          activeName.value = "third"
        } else {
          activeName.value = "second"
          return false
        }
      })
    } else {
      activeName.value = "first"
      return false
    }
  })
}
//商品详情提交
const DetailsSubmit = () => {
  InfoForm.value.GoodsForm.validate((Infovalid) => {
    if (Infovalid) {
      SizeForm.value.aloneRef.validate(Sizevalid => {
        if (Sizevalid) {
          activeName.value = "third"
          DetailsForm.value.RichForm.validate(Detailvalid => {
            if (Detailvalid) {
              sendRequest()
            } else {
              return false
            }
          })
        } else {
          activeName.value = "second"
          return false
        }
      })
    } else {
      activeName.value = "first"
      return false
    }
  })
}
//基本信息提交
const InfoSubmit = () => {
  InfoForm.value.GoodsForm.validate(Infovalid => {
    if (!Infovalid) {
      return false
    } else {
      SizeForm.value.aloneRef.validate(Sizevalid => {
        if (Sizevalid) {
          activeName.value = "third"
        } else {
          activeName.value = "second"
        }
      })
    }
  })
}
//获取要传递的参数
function sendRequest() {
  const first = store.state.goods.goods_info
  const second = store.state.goods.goods_size
  const third = store.state.goods.goods_detail
  const edition = store.state.goods.edition
  const addModifyGoodData = {
    good_name: first.goods_name,
    type_id: first.goods_type,
    price: second.goods_price,
    imgs: first.goods_img,
    info: third,
    edition: edition,
    type_parent_id: first.type_parent_id,
    img: first.goods_img[0],
    good_id: first.good_id - 0
  }

  if (!addModifyGoodData.good_id) {
    delete addModifyGoodData.good_id
  }
  addModifyGood(addModifyGoodData).then(res => {
    if (res.code === 2000) {
      ElMessage({
        type: 'success',
        message: '操作成功'
      })
      router.push({path: '/admin/goods/list'})
    } else {
      ElMessage.error("操作失败")
    }
  })
}

onMounted(() => {
  if (route.query.goodsId) {
    store.dispatch("edits/ReceiveGoodInfo", route.query.goodsId)
    loading.value = true
    setTimeout(() => {
      loading.value = false
    }, 500)
  }
})
</script>
<style scoped>
</style>
<style>
.el-tabs__item {
  padding: 0 30px;
}

</style>
